<template>
  <div>
    <a-spin :spinning="spinning" tip="正在提交. . ." v-if="Topics.length > 0">
      <div class="main">
        <div class="left_select">
          <div class="select_main">
            <div class="select_wrap">
              <div
                class="select_item"
                v-for="(item, index) in Topics"
                :key="item.id"
                :class="{
                  error: !item.isStatus && IsSubmit,
                  active: item.isActive,
                }"
                @click="selectChange(index)"
              >
                {{ index + 1 }}
              </div>
            </div>
          </div>
        </div>
        <div class="right_answer">
          <div class="answer_wrap">
            <div class="header_topic">
              <span>题目 {{ ActiveData.key }}:</span>
              {{ ActiveData.topic }}
            </div>
            <div class="answer_content">
              <a-textarea
                v-model="ActiveData.answer"
                :auto-size="{ minRows: 3, maxRows: 7 }"
                @change="textareaChange"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="btn_wrap">
        <a-button
          v-if="NextIndex < Topics.length"
          @click="selectChange(NextIndex)"
          >下一题
          <a-icon type="right" />
        </a-button>
        <a-button v-else size="large" @click="submitTest"
          >提交
          <a-icon type="check" />
        </a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      IsSubmit: false, //是否提交过
      spinning: false,
    };
  },
  computed: {
    ...mapState("Group", ["Topics"]),
    ActiveData() {
      return this.Topics.filter((item) => item.isActive)[0];
    },
    NextIndex() {
      return this.Topics.findIndex((item) => item.isActive) + 1;
    },
  },
  methods: {
    ...mapMutations("Group", ["removePandesData"]),
    //切换选中的题目选项卡
    selectChange(index) {
      this.Topics.forEach((item) => (item.isActive = false));
      this.Topics[index].isActive = true;
    },
    //输入框内容变化
    textareaChange() {
      if (this.ActiveData.answer.trim().length > 0) {
        this.ActiveData.isStatus = true;
      } else {
        this.ActiveData.isStatus = false;
      }
    },
    // //提交测试
    submitTest() {
      var tempdata = this.Topics.filter((item) => !item.isStatus);
      if (tempdata.length != 0) {
        //有未完成的题目
        this.IsSubmit = true;
        this.$message.warning("未完成所有题目");
        return;
      }
      //提交答案
      this.removePandesData(); //关闭选项卡
      //发起api请求完成题目
      // this.spinning = true; //实现提交中的loading信息
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  padding: 1%;

  .left_select {
    flex: 1;

    .select_main {
      width: 80%;
      margin: 0 auto;
      border: 1.5px solid #ccc;
      min-height: 200px;

      .select_wrap {
        padding: 1%;
        display: flex;
        flex-wrap: wrap;

        .select_item {
          width: 12%;
          margin: 1%;
          text-align: center;
          border: 1.5px solid #ccc;
        }
      }
    }
  }

  .right_answer {
    flex: 4;

    .answer_wrap {
      height: 100%;
      padding: 0 1% 1% 1%;

      .header_topic {
        margin-bottom: 1%;

        span {
          font-size: 15px;
          font-weight: 600;
        }
      }

      .answer_content {
        height: 90%;
        width: 50%;

        .ant-input {
          min-height: 90% !important;
        }
      }
    }
  }
}

.error {
  background-color: red;
  color: white;
}

.active {
  background-color: #7b9e31;
  color: white;
}

.btn_wrap {
  width: 60%;
  display: flex;
  justify-content: flex-end;

  .ant-btn {
    background-color: #7b9e31;
    color: white;
  }
}
</style>